<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js实现文字间歇滚动</title>
	</head>
	<style type="text/css">
		ul{list-style:none;padding:0px;margin:0px;}
		.clearfix{
			display:block;
			content:'';
			clear:both;
		}
		#box{
			width:300px;
			border:1px solid #ccc;
			margin:200px;
			height:90px;
			overflow:hidden;
			background:green;
		}
		#one,#two{
			 width:100%;
		}
		li{
			 width:100%;
			 height:30px;
			 line-height:30px;
			 text-align:center;
		}
		li:nth-child(odd){
			background:green;
		}
		li:nth-child(even){
			background:gray;
		}
	</style>
	<body> 
		<div id="box" >
			<ul id="one">
				<li>1aaaaaaaaaaaaaaaaaaaaa</li>
				<li>2aaaaaaaaaaaaaaaaaaaaa</li>
				<li>3aaaaaaaaaaaaaaaaaaaaa</li>
				<li>4aaaaaaaaaaaaaaaaaaaaa</li>
				<li>5aaaaaaaaaaaaaaaaaaaaa</li>
				<li>6aaaaaaaaaaaaaaaaaaaaa</li>
				<li>7aaaaaaaaaaaaaaaaaaaaa</li>
				<li>8aaaaaaaaaaaaaaaaaaaaa</li>
				<li>9aaaaaaaaaaaaaaaaaaaaa</li>
				<li>10aaaaaaaaaaaaaaaaaaaaa</li>
				<li>11aaaaaaaaaaaaaaaaaaaaa</li>
				<li>13aaaaaaaaaaaaaaaaaaaaa</li>
				<li>14aaaaaaaaaaaaaaaaaaaaa</li>
				<li>15aaaaaaaaaaaaaaaaaaaaa</li>
				<li>16aaaaaaaaaaaaaaaaaaaaa</li>
				<li>17aaaaaaaaaaaaaaaaaaaaa</li>
			</ul>
			<ul id="two">
			</ul>
 		</div>
 		<script>
 			var box = document.getElementById('box');
 			var one = document.getElementById('one');
 			var two = document.getElementById('two'); 
 			var moveTime = 30;
 			two.innerHTML = one.innerHTML;
 			var moveHeight = 30;
 			var timer;
 			function moveText(){
 				if(one.offsetHeight-box.scrollTop<=0){
 					box.scrollTop = 0;
 				}else{
 					box.scrollTop++;
 					if(box.scrollTop%30 == 0){
 						clearInterval(timer);
 						setTimeout(moveSetInter,1000);
 					}	
 				}
 			}
 			function moveSetInter(){
 				timer = setInterval(moveText,30);
 			}
 			setTimeout(moveSetInter,1000);
 		</script>
	</body>
</html>